<template>
  <a-layout id="components-layout-demo-top-side-2" style="height: 100vh">
    <a-layout-header class="header">
      <div class="logo" />
      <a-menu
        theme="dark"
        mode="horizontal"
        :defaultSelectedKeys="['2']"
        :style="{ lineHeight: '64px' }"
      >
        <a-menu-item key="1">顶部导航1</a-menu-item>
        <a-menu-item key="2">顶部导航 2</a-menu-item>
        <a-menu-item key="3">顶部导航1 3</a-menu-item>
      </a-menu>
    </a-layout-header>
    <a-layout style="height: fit-content;">
      <a-layout-sider
        width="200"
        style="background: #fff;overflow-y: auto;overflow-x: hidden"
      >
        <a-menu
          theme="dark"
          mode="inline"
          @click="menuClick"
          :defaultSelectedKeys="['/dashboard/analysis']"
          :style="{ height: '100%', borderRight: 0 }"
        >
          <a-menu-item key="/dashboard/analysis" title="控制台">
            <a-icon type="pie-chart" />
            <span>控制台</span>
          </a-menu-item>

          <a-sub-menu key="sub1">
            <span slot="title"><a-icon type="user" />系统配置</span>
            <a-menu-item key="/dict/catalog" title="字典管理"
              >字典管理</a-menu-item
            >
            <a-menu-item key="/dict/item" title="字典纲领"
              >字典纲领</a-menu-item
            >
            <a-menu-item key="/hello" title="会员管理">
              会员管理
            </a-menu-item>
            <a-menu-item key="/user/staff" title="员工管理">
              员工管理
            </a-menu-item>
            <a-menu-item key="3" title="角色管理">角色管理</a-menu-item>
            <a-menu-item key="4" title="资源管理">资源管理</a-menu-item>
          </a-sub-menu>
          <a-sub-menu key="sub2">
            <span slot="title"><a-icon type="laptop" />业务管理</span>
            <a-menu-item key="/activity" title="活动管理">活动管理</a-menu-item>
            <a-menu-item key="6" title="游记管理">游记管理</a-menu-item>
            <a-menu-item key="7" title="攻略管理">攻略管理</a-menu-item>
            <a-menu-item key="8" title="option8">option8</a-menu-item>
          </a-sub-menu>
          <a-sub-menu key="sub3">
            <span slot="title"><a-icon type="notification" />商品管理</span>
            <a-menu-item key="9">商品分类</a-menu-item>
            <a-menu-item key="10">商品发布</a-menu-item>
            <a-menu-item key="11">option11</a-menu-item>
          </a-sub-menu>
        </a-menu>
      </a-layout-sider>
      <a-layout style="overflow: auto">
        <a-layout-content
          :style="{ background: '#fff', padding: '10px 24px', margin: 0 }"
        >
          <a-tabs
            hideAdd
            v-model="activeKey"
            type="editable-card"
            @edit="onEdit"
            @change="change"
          >
            <a-tab-pane
              v-for="pane in panes"
              :tab="pane.title"
              :key="pane.key"
              :closable="pane.closable"
            ></a-tab-pane>
          </a-tabs>

          <keep-alive
            :include="this.$store.keepAliveList"
            :exclude="this.$store.keepAliveExcludList"
          >
            <router-view :key="$route.fullPath"></router-view>
          </keep-alive>
        </a-layout-content>
      </a-layout>
    </a-layout>
  </a-layout>
</template>
<script>
export default {
  name: "BasicLayout",
  data() {
    const panes = [];
    return {
      activeKey: null,
      panes,
      collapsed: false
    };
  },
  methods: {
    addPane(newPane) {
      const panes = this.panes;
      //判断是否已存在tab
      let exists = false;
      panes.forEach(pane => {
        if (pane.key === newPane.key) {
          exists = true;
        }
      });
      //不存在的情况下添加到tab中，并在路由缓存组件中添加
      if (!exists) {
        panes.push(newPane);
      }
      this.panes = panes;
    },
    menuClick(item) {
      let targetKey = item.key.toString();
      // console.log("全局分析", targetKey);
      this.add(targetKey, item.item.title, item.key);
    },
    onEdit(targetKey, action) {
      this[action](targetKey);
    },
    add(key, title, url) {
      this.panes.forEach(pane => {
        if (pane.key === key) {
          this.activeKey = key;
        }
      });
      //跳转到指定路由
      this.$router.push({ path: key }, () => {
        console.log("+++++++++", key, this.$route.matched);
        const routerComponents = this.$route.matched.filter(
          t => t.path === key
        );
        console.log("符合组件", routerComponents);
        if (routerComponents.length > 0) {
          routerComponents.forEach(rc => {
            const commentName = rc.components.default.name;
            this.$store.commit("keepAliveListAdd", commentName);
            this.addPane({
              title: title,
              key: key,
              url: url,
              name: commentName
            });
          });
        }
      });
    },
    change(targetKey) {
      this.panes.forEach(pane => {
        if (pane.key === targetKey) {
          this.activeKey = targetKey;
          this.$router.push(pane.url);
        }
      });
    },
    remove(targetKey) {
      let activeKey = this.activeKey;
      let lastIndex;
      this.panes.forEach((pane, i) => {
        if (pane.key === targetKey) {
          lastIndex = i - 1;
          this.$store.commit("keepAliveListRemove", pane.name);
        }
      });

      const panes = this.panes.filter(pane => pane.key !== targetKey);
      if (panes.length && activeKey === targetKey) {
        if (lastIndex >= 0) {
          activeKey = panes[lastIndex].key;
        } else {
          activeKey = null;
        }
      }
      this.panes = panes;
      this.activeKey = activeKey;
    }
  },
  activated: function() {
    console.log(3);
  },
  deactivated: function() {
    console.log(4);
  }
};
</script>

<style>
#components-layout-demo-top-side-2 .logo {
  width: 120px;
  height: 31px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px 28px 16px 0;
  float: left;
}
</style>
